<template>
  <div class="container p-4 border-box">
    <div class="自定义居中">自定义居中元素</div>
    <h1 class="font-weight-100 text-center m-b-10">问卷</h1>
    <!-- <Vbase /> -->
    <div class="mb-4">
      <div class="btn-group m-b-4">
        <el-button type="primary" :icon="Plus" @click="goToEditor">创建问卷</el-button>
        <el-button type="success" :icon="Compass" @click="goToMetar">组件市场</el-button>
      </div>
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column
          fixed
          prop="createDate"
          label="创建日期"
          width="180"
          :formatter="formatDate"
        />
        <el-table-column prop="title" label="问卷标题" />
        <el-table-column prop="surveyCount" label="题目数" width="150" align="center" />
        <el-table-column
          prop="updateDate"
          label="最近更新日期"
          width="180"
          align="center"
          :formatter="formatDate"
        />
        <el-table-column fixed="right" label="操作" width="300" align="center">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="goViewSurvey(scope.row)">
              查看问卷
            </el-button>
            <el-button link type="primary" size="small" @click="goEditorSurvey(scope.row)"
              >编辑</el-button
            >
            <el-button link type="primary" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script setup lang="ts">
import { getAllSurvey } from '@/db/operation'
import type { SurveyDBData, SurveyDBReturnData } from '@/types'
import { Plus, Compass } from '@element-plus/icons-vue'
import { formatDate } from '@/utils'
const tableData = ref<SurveyDBData[]>([])
function getData() {
  getAllSurvey().then((res) => {
    console.log(res)
    tableData.value = res
  })
}
getData()
const router = useRouter()

// 查看问卷
const goViewSurvey = (info: SurveyDBReturnData) => {
  router.push({
    path: `/preview/${info.id}`,
    state: { from: 'home' },
  })
}
// 编辑问卷
const goEditorSurvey = (info: SurveyDBReturnData) => {
  router.push({
    path: `/editor/${info.id}/survey-type`,
    state: { from: 'home' },
  })
}
const goToEditor = () => {
  localStorage.setItem('activeView', 'editor')
  router.push('/editor/survey-type')
}
const goToMetar = () => {
  localStorage.setItem('activeView', 'materials')
  router.push('/materials')
}
</script>
<style scoped>
.container {
  .自定义居中 {
    /* 真实px是：20*html-font-size/rootValue，rootValue在postcss.config*/
    font-size: 20px;
  }
  user-select: none;
  .btn-group {
  }
}
</style>
